<template>
  <div>
    <Parent
      v-if="parentList.parent"
      :parentList="parentList.parent"
      :parentName="parentList.account.nickname"
      @showAndfoucs="diguiReply"
    />
    <div class="main">
      <div class="userInfo">
        <el-row type="flex" class="row-bg">
          <div class="Avatar">
            <img
              :src="$axios.defaults.baseURL + parentList.account.defaultAvatar"
              alt
            />
          </div>
          <div class="info">
            <p class="name">{{ parentList.account.nickname }}</p>
            <p class="date">
              {{ $moment(parentList.created_at).format("YYYY-MM-DD") }}
            </p>
          </div>
        </el-row>
      </div>
      <div class="commentCon">
        <p class="content">
          {{ parentList.content }}
        </p>
        <div class="imgs" v-if="parentList.pics.length > 0">
          <div class="img" v-for="(img, index) in parentList.pics" :key="index">
            <img :src="$axios.defaults.baseURL + img.url" alt />
          </div>
        </div>
      </div>
      <div class="reply" @click="showAndfoucs">
        <span class="iconfont">&#xe73e;</span>回复
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Parent",
  props: ["parentList"],
  methods: {
    showAndfoucs() {
      this.$emit("showAndfoucs", {
        id: this.parentList.id,
        nickname: this.parentList.account.nickname
      });
    },
    diguiReply(parentInfo) {
      this.$emit("showAndfoucs", parentInfo);
    }
  }
};
</script>
<style lang="less" scoped>
.main {
  margin-top: 20px;
  padding-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;
  .userInfo {
    margin-left: 20px;
    .Avatar {
      display: inline;
      img {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 10px;
      }
    }
    .info {
      .name {
        font-size: 18px;
      }
      .date {
        margin-top: 9px;
        font-size: 14px;
        color: #999;
      }
    }
  }
  .commentCon {
    padding: 20px;
    color: #333;
    .content {
      text-align: justify;
      text-justify: newspaper;
      word-break: break-all;
      span {
        color: blue;
      }
    }
    .imgs {
      margin-top: 20px;
      .img {
        display: inline;

        img {
          padding: 5px;
          margin: 0 5px;
          border: 1px dashed #ddd;
          width: 80px;
          height: 80px;
        }
      }
    }
  }
  .reply {
    padding-left: 20px;
    color: #868585;
    cursor: pointer;
    span {
      font-weight: 700;
      margin-right: 6px;
    }
  }
}
</style>
